<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<#assign base=request.contextPath  />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/frame/static/css/style.css">
    <link rel="icon" href="${base}/frame/static/image/code.png">
    <style type="text/css">
    </style>
    <style>
        .layui-table-cell {
            height: auto;
            line-height:;
        }
        html { overflow-x: hidden; overflow-y: auto; }
    </style>
</head>
<body class="body">
<!-- 工具集 -->
<div class="my-btn-box">
            <span style="height: 50px;">

				
                <div class="layui-input-inline">
                    <label class="layui-form-label">车辆品牌</label>
                    <input type="text" autocomplete="off" id="carBrand" placeholder="品牌" class="layui-input"
                           style="width: 150px;height: 31px;margin-top: 4px;">
                </div>
                <a class="layui-btn layui-btn-danger" id="seche22">查询</a>
            </span>
</div>
<!-- table -->
<div id="dateTable"></div>
<script src="${base}/jquery-1.8.3.min.js"></script>
<script src="${base}/frame/layui/layui.all.js"></script>
<script type="text/javascript" src="${base}/js/index.js"></script>

<script type="text/javascript">

    // layui方法
    layui.use(['tree', 'table', 'vip_table', 'layer'], function () {

        // 操作对象
        var form = layui.form
                , $ = layui.jquery
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate,
                table = layui.table;

        // 表格渲染
        table.render({
            even: true,//开启隔行背景
            url: '${base}/car/carclist',
            size: 'sm',//小尺寸的表格
            title: '用户数据表',
            toolbar: '#toolbarDemo',
            elem: '#dateTable',                  //指定原始表格元素选择器（推荐id选择器）
            cols: [[                  //标题栏
                {field: 'ptName', title: '所属公司', width: 90}
                , {field: 'carName', title: '车辆名', width: 80}
                , {field: 'carNumber', title: '车牌', width: 80}
                , {field: 'carBrand', title: '车辆品牌', width: 90}
                , {field: 'carType', title: '车辆型号', width: 90}
                , {field: 'carMoeny', title: '车辆价格', width: 90}
                , {field: 'carKm', title: '里程数', width: 80}
                , {field: 'carSize', title: '容积', align: 'center'}
                , {field: 'load', title: '载重', align: 'center'}
                , {field: 'renewal', title: '续航', align: 'center'}
                , {field: 'wheelbase', title: '轴距', align: 'center'}
                , {field: 'insurance', title: '有无保险', width: 90，
                 templet:function(val){
                var insurance=val.pass;
                if(insurance==2){
                    return "无"
                }else{
                    return"有"
                }
            }}
            ]]
            , id: 'dataCheck'
            , method: 'get'
                ,height:480
                ,page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                    ,theme: '#9AC747'
                    ,limit: 10
        }
        });


        // 获取选中行
        table.on('checkbox(dataCheck)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

    });
    //键盘事件
    $("body").bind("keydown", function (e) {
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            //回车执行查询
            $("#seche22").click();
        }
    });
    $('#seche22').on('click', function () {
        var carBrand = $("#carBrand").val();
        //表刷新方法
        var table = layui.table;
        table.reload(
                'dataCheck', {
                    url: '${base}/car/searchcardetail?ptname=${ptname}',
                    where: {carBrand: carBrand} //设定异步数据接口的额外参数
                });

    })
</script>
</body>
</html>